<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title><?php echo $page_title ?></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ini untuk css -->
    <?php 
            echo link_tag('assets/bootstrap/css/bootstrap.css','stylesheet','text/css');
            echo link_tag('assets/css/flat-ui.css','stylesheet','text/css');
            echo link_tag('assets/css/style.css','stylesheet','text/css');
            echo link_tag('assets/css/bootstrap-responsive.css','stylesheet','text/css');          
        ?>
    <!-- ini untuk css -->
    
<!-- 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
     -->
    <!-- Load JS here for greater good =============================--> 
    <script src="<?php echo base_url(); ?>assets/js/jquery-1.8.3.min.js"></script>
    <!-- 
    <script src="<?php echo base_url(); ?>assets/js/jquery-ui-1.10.3.custom.min.js"></script>
 -->
    <script src="<?php echo base_url(); ?>assets/js/jquery.ui.touch-punch.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/bootstrap-select.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/bootstrap-switch.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/flatui-checkbox.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/flatui-radio.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>/assets/js/jquery.tagsinput.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/jquery.placeholder.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/jquery.stacktable.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/application.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/squel.min.js"></script>
    <!-- Load JS here for greater good =============================-->

    <!-- ini untuk timeline -->
    
    <!--<script src="<?php echo base_url()?>assets/js/timeline/jquery.min.js" type="text/javascript"></script>
    <script src="<?php echo base_url()?>assets/js/timeline/jquery-ui.min.js" type="text/javascript"></script>
    --><script src="<?php echo base_url()?>assets/js/timeline/scroll-pagination.js" type="text/javascript"></script>
    <script src="<?php echo base_url()?>assets/js/timeline/slimScroll.js" type="text/javascript"></script>
    


    

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
	
    <script type="text/javascript">
	$(document).ready(function(){
		//$("#pesan_item").show();
		//alert(<?php echo $id;?>);
		updatePesan(<?php echo $id;?>);
        //updateNotif(<?php echo $id;?>);
	});
   var refreshRate = 5000;
   function generatePesanItem(data) {
	   var ret = "";
	   var size = data.length;
	   for (var i=0;i<3;i++) {
        if(data[i]){
		   var sender = data[i]['sender'];
		   var body = data[i]['body'].substring(0,25) + "...";
		   var sent_time = data[i]['sent_time'];
           var senderAvatar = data[i]['senderAvatar'];

		   ret = ret + "<li style=\"font-size:10px\">";
		   ret = ret + "<a style=\"font-size:11px\"><div class=\"row-fluid\"><div class=\"span4\">";
		   if(senderAvatar!=null && senderAvatar!=""){
                ret = ret + "<img src=\"<?php echo base_url() ?>avatar/thumb/"+senderAvatar+"\" data-src=\"http://localhost/ojexcom/assets/js/holder.js/160x120\">";
            } else {
                ret = ret + "<img src=\"http://localhost/ojexcom/assets/img/person.jpg\" data-src=\"http://localhost/ojexcom/assets/js/holder.js/160x120\">";
            }
           //ret = ret + "<img class=\"\" src=\"http://localhost/ojexcom/assets/img/ayumi.jpg\" data-src=\"http://localhost/ojexcom/assets/js/holder.js/160x120\">";
		   ret = ret + "</div><div class=\"span8\">";
		   ret = ret + "<strong>" + sender + "</strong><br/>";
		   ret = ret + body + "<br/>" + sent_time;
		   ret = ret + "</div></div></a></li>";
        } else {
            break;
        }
	   }
        
	   ret = ret + "<li style=\"\"><a href=\"<?php echo site_url('pesan')?>\">Lihat Semua</a></li>";
	   return ret;
   }

   function generateNotifItem(data) {
       var ret = "";
       var size = data.length;
       var userIdNow = $(".userIdNow").attr('id'); 
       //result = result + "<li>"+ data['transaction'][0]['notification_id'] +"</li>";
       for (var i=0;i<3;i++) {
        if(data['transaction'][i]){   
            var id = data['transaction'][i]['notification_id'];        
            var time = data['transaction'][i]['timestamp'];
            var dari = data['transaction'][i]['source_label'];
            var ke = data['transaction'][i]['destination_label'];
            var user = data['transaction'][i]['userName'];
            var providerId = data['transaction'][i]['providerId'];
            var provider = data['transaction'][i]['providerName'];
            var departTime = data['transaction'][i]['departTime'];
            var status = data['transaction'][i]['status']; //alert(status);
            var need_response = data['transaction'][i]['need_response'];
            var trans_id = data['transaction'][i]['idTransaction'];            

           ret = ret + "<li style=\"font-size:10px;background-color:white;\">";
           ret = ret + "<a style=\"font-size:11px\"><div class=\"row-fluid\"><div class=\"span4\">";
           // if(senderAvatar!=null && senderAvatar!=""){
           //      ret = ret + "<img src=\"<?php echo base_url() ?>avatar/thumb/"+senderAvatar+"\" data-src=\"http://localhost/ojexcom/assets/js/holder.js/160x120\">";
           //  } else {
           //      ret = ret + "<img src=\"http://localhost/ojexcom/assets/img/person.jpg\" data-src=\"http://localhost/ojexcom/assets/js/holder.js/160x120\">";
           //  }
           // ret = ret + "<img class=\"\" src=\"http://localhost/ojexcom/assets/img/ayumi.jpg\" data-src=\"http://localhost/ojexcom/assets/js/holder.js/160x120\">";
           // ret = ret + "</div><div class=\"span8\">";
           // ret = ret + "<strong>" + user + "</strong><br/>";
           // ret = ret + "" + dari + " -> " + ke + "<br/>";
           //ret = ret + "<?php echo nicetime("+departTime+"); ?>";           
           // ret = ret + departTime;
           if(data['transaction'][i]){
                if(status == 'S'){ 
                    if(need_response == 1){
                        ret = ret + user + " ingin melakukan perjalanan dengan Anda. | ";
                    } else {
                        ret = ret + "Permintaan terkirim. Menunggu persetujuan ";
                        ret = ret + provider;
                    }
                } else if(status == 'L'){ 
                    if(providerId == userIdNow){
                        ret = ret + user + " telah mengunci poin untuk rekeningnya . <br/>";
                        ret = ret + user + " ingin melakukan perjalanan dengan Anda. | ";
                    } else {
                        ret = ret + "Poin telah dikunci server untuk ";
                        ret = ret + provider;
                    }
                } else if(status == 'D'){ 
                    if(providerId == userIdNow){
                        ret = ret + "Menunggu konfirmasi " + user + " bahwa ia telah diantar. ";
                    } else {
                        ret = ret + "Perjalanan dengan " + provider ;
                    }                    
                } else if(status == 'C'){ 
                    if(providerId == userIdNow){
                        ret = ret + "Anda telah membatalkan perjalanan dengan " + user;
                    } else {
                        ret = ret + provider + " telah membatalkan permintaan Anda.";
                    }                    
                } else if(status == 'F'){ 
                    if(providerId == userIdNow){
                        ret = ret + "Anda telah mengkonfirmasi permintaan " + user;
                    } else {
                        ret = ret + "Permintaan Anda telah dikonfimasi. ";
                        ret = ret + "Anda akan pergi ke " + ke + " dengan " + provider;
                    }                    
                }
           }
           
           ret = ret + "</div></div></a></li>";
        } else {
            break;
        }
       } 
       if(typeof data['premium'] != 'undefined'){
            ret = ret + "<li style=\"font-size:10px;background-color:white;\">";
           ret = ret + "<a style=\"font-size:11px\"><div class=\"row-fluid\"><div class=\"span4\">";
         
            ret = ret + "Selamat. Anda telah menjadi anggota premium";
            ret = ret + "</div></div></a></li>";
        }
       ret = ret + "<li style=\"\"><a href=\"<?php echo site_url('notifikasi/get')?>\">Lihat Semua</a></li>";
       return ret;
   }
   
   function updatePesan() {
	   $.ajax({
		   url:"http://localhost/ojexcom/index.php/pesan/get",
		   dataType:"json",
		   beforeSend:function(){
		   },
		   success:function(result) {
			   var data = result['message'];
               var dataNotif = result['notifications'];
               //alert(result['notifications']['transaction'][0]['notification_id']);
			   var count = result['count'];
               var cntNotif = result['countNotif']; 
               if (cntNotif<1) {
                   $("#notifikasi").html("NOTIFIKASI <b class=\"caret\"></b>");
                   $("#notif_item").html("<li><a>Tidak ada Notifikasi</a></li>");
               } else { 
                    //var htmlNotif = "<li>halo</li>";
                    var htmlNotif = generateNotifItem(dataNotif);
                   $("#notifikasi").html("NOTIFIKASI (" + cntNotif + ") <b class=\"caret\"></b>");
                   $("#notif_item").html(htmlNotif);
               }
			   if (count==0) {
				   //$("#pesan_item").hide();
				   $("#pesan").html("PESAN <b class=\"caret\"></b>");
                   $("#pesan_item").html("<li><a href=\"<?php echo site_url('pesan'); ?>\">Lihat Semua</a></li>");
			   } else {
                    //alert(data[0]['sender']);                    
				   var htmlVal = generatePesanItem(data);
				   $("#pesan").html("PESAN (" + count + ") <b class=\"caret\"></b>");
				   $("#pesan_item").html(htmlVal);
			   }
               
		   },
		   complete:function(){
			   setTimeout(updatePesan,refreshRate);
		   }
	   });
   }

   function updateNotif() {
	   $.ajax({
		   url:"http://localhost/ojexcom/index.php/notifikasi/countNotif",
		   beforeSend:function(){
		   },
		   success:function(result) {
			   var count = result;
			   if (count==0) {
				   $("#notif").html("NOTIFIKASI");
			   } else {
				   $("#notif").html("NOTIFIKASI (" + count + ")");
			   }
		   },
		   complete:function(){
			   setTimeout(updateNotif,refreshRate);
		   }
	   });
   }
	</script>
    </head>
    <body onunload="GUnload()">

        <header>         
         
            <div class="row navbar navbar-inverse">
              <div class="navbar-inner">
              <div class="container">
                <div class="span12 offset1" >                   
                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <div class="nav-collapse collapse navbar-responsive-collapse">                   
                    <ul class="nav">  
                    <li><img style="z-index:10; margin-bottom:-40px;" id="logo" src="<?php echo base_url();?>/assets/img/logo.jpg" alt="O-JEX"> </li>  
                            <li><?php echo anchor(base_url(),'BERANDA');?> </li>
                            <?php if(!$isLogin){ ?>
                            <?php if($this->session->userdata('page')!='login') { ?>

                            <li>
                            <!-- <form class="form-inline" method="POST" action="<?php echo site_url('login');?>">
                              <input type="text" name="username" class="input-small" placeholder="Username">
                              <input type="password" name="password" class="input-small" placeholder="Password">                              
                              <button type="submit" class="btn">LOG IN</button>
                            </form> -->
                            <a href="#myLogin" data-toggle="modal">LOGIN</a>
                            </li>
                            <?php } ?>
                            <li><a href="#signUp" data-toggle="modal">SIGN UP</a></li>
                            <?php } else { ?>
                            <div class="userIdNow" id="<?php echo $this->session->userdata('user_id'); ?>" style="display:none"></div>
                            <li class="dropdown">     
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo strtoupper($user);?> <b class="caret"></b></a>                         
                              <ul class="dropdown-menu">
                                <li><?php echo anchor(site_url('profil/detail/'.$id),'LIHAT PROFIL');?></li>
                                <?php if($this->session->userdata('isPremium') == 1){ ?>
                                <li><?php echo anchor(site_url('transaction/getLog'),'REKENING');?> </li>
                                <?php } ?>
                                <li><?php echo anchor(site_url('logout'),'LOGOUT'); ?></li>
                              </ul>
                            </li>
                            <?php if($this->session->userdata('isPremium') == 1){ ?>
                            <li><a style="padding:5 0 0px; position:center;" href="#" data-toggle="tooltip" data-placement="bottom" title="Anda sudah premium"><img id="icon-premium" height="20px" width="20px" src="<?php echo base_url();?>/assets/img/ic_go_premium.png"></a></li>
                            <?php }else { ?>
                            <li><a style="padding:5 0 0px; position:center;" href="<?php echo site_url().'/profil/premium/'.$id;?>" data-toggle="tooltip" data-placement="bottom" title="Go premium!"><img id="icon-premium" height="20px" width="20px" src="<?php echo base_url();?>/assets/img/ic_rating_empty.png"></a></li>
                            <?php } ?>
                            <!-- <li><a href="<?php echo site_url('notifikasi/get')?>" id="notifikasi">NOTIFIKASI</a></li> -->
                            <!-- <li><a href="<?php echo site_url('pesan')?>" id="pesan">PESAN</a>
								<ul class="" id="pesan_item" style="">
								</ul>
                            </li> -->
                            <!-- <li class="dropdown">     
                            <a class="dropdown-toggle" data-toggle="dropdown" id="pesan" href="<?php echo site_url('pesan')?>">PESAN<b class="caret"></b></a>                         
                              <ul class="dropdown-menu" id="pesan_item">                               
                              </ul>
                            </li> -->
                            <li class="dropdown">     
                            <a class="dropdown-toggle" data-toggle="dropdown" id="notifikasi" href="<?php echo site_url('notifikasi/get')?>">NOTIFIKASI<b class="caret"></b></a>                         
                              <ul class="dropdown-menu" id="notif_item" style="width:300px;font-size:11px;background-color:white;">                               
                              </ul>
                            </li>
                            <li class="dropdown">     
                            <a class="dropdown-toggle" data-toggle="dropdown" id="pesan" href="<?php echo site_url('pesan')?>">PESAN<b class="caret"></b></a>                         
                              <ul class="dropdown-menu" id="pesan_item" style="width:250px;font-size:11px;">                               
                              </ul>
                            </li>
                            <li><?php echo anchor(site_url('timeline'),'CARI'); ?></li>
                            <?php }?>
                            <li><?php 
                            echo anchor(site_url('perjalanan'),'BUAT PERJALANAN');

                            ?></li>
                        </ul>                    
                  </div><!-- /.nav-collapse -->
                </div>
              </div>
              </div><!-- /navbar-inner -->
          </div>
        
        </header>

<!-- Modal -->
        <div id="myLogin" class="span4 modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header" id="mheader">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 id="myModalLabel">LOG IN</h4>
            </div>
            <form method="POST" action="<?php echo site_url('login');?>">
                <div class="modal-body">
                  <div class="row">
                    <div class="span4">
                        <input type="text" name="username" class="input-medium" placeholder="Username">
                    </div>
                  </div>
                  <div class="row">
                    <div class="span4">
                        <input type="password" name="password" class="input-medium" placeholder="Password">
                    </div>
                  </div>
                  
                  <input type="submit" value="LOG IN" class="span2 offset2 btn btn-warning" />
                  <a href="#lupa" data-toggle="modal" class="">Lupa password?</a>
                </div>
            </form>
        </div>
        <!-- end modal -->

        <!-- Modal -->
        <?php

$jenis = array('1' => 'Laki-laki', '2' => 'Perempuan');

function generate_input($type='', $array=array(), $name='', $sel='') {
    if ($type == 'radio') {
        foreach ($array as $key => $val) {
            echo '<label class="radio">';
            echo '<input data-toggle="radio" type="' . $type . '" name="' . $name . '" value="' . $key . '"/>' . $val . '&nbsp;';
            echo '</label>';
        }
    } else {
        foreach ($array as $key => $val) {
            echo '<input type="' . $type . '" name="' . $key . '" value="' . $key . '"/>' . $val . '&nbsp;';
        }
    }
}
?>
        <div id="signUp" class="span4 modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header" id="mheader">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 id="myModalLabel">SIGN UP</h4>
            </div>
            <form method="POST" action="<?php echo site_url('registrasi/daftar');?>">
                <div class="modal-body">
                  <div class="row">
                    <div class="span2">Nama</div>
                    <div class="span4">
                      <div class="input-append">
                        <input class="span3" type="text" name="name" value="" />
                        <span class="add-on"><i class="icon-user"></i></span>
                      </div>
                    </div>
                    </div>
                    <div class="row">          
                    <div class="span2"> Jenis Kelamin:  </div>
                    <div class="span4">        
                        <?php generate_input('radio',$jenis,'gender'); ?>
                    </div>
                    </div>
                    <div class="row">
                    <div class="span2">Telepon</div>    
                    <div class="span4">
                      <!-- <input class="span3" type="text" name="phoneNumber" value="" placeholder="Telepon" /> -->
                      <div class="input-append">
                        <input class="span3" type="text" name="phoneNumber" value="" placeholder="Telepon" />
                        <span class="add-on"><img src="<?php echo base_url(); ?>assets/img/phone.png" style="width:14px; height:14px" /></span>
                      </div>
                    </div>
                    </div>
                    <div class="row">
                    <div class="span2">Username</div>   
                    <div class="span4">
                      <!-- <input class="span3" type="text" name="username" value="" placeholder="Username"/> -->
                      <div class="input-append">
                        <input class="span3" type="text" name="username" value="" placeholder="Username" />
                        <span class="add-on"><i class="icon-pencil"></i></span>
                      </div>
                    </div>
                    </div>
                    <div class="row">
                    <div class="span2">Password</div>   
                    <div class="span4">
                      <!-- <input class="span3" type="password" name="password" value="" placeholder="password"/> -->
                      <div class="input-append">
                        <input class="span3" type="password" name="password" value="" placeholder="Password" />
                        <span class="add-on"><img src="<?php echo base_url(); ?>assets/img/key.png" style="width:14px; height:14px" /></span>
                      </div>
                    </div>
                    </div>
                    <div class="row">
                    <div class="span2">Email </div>   
                    <div class="span4">
                      <!-- <input class="span3" type="text" name="email" value="" placeholder="you@email.com"/> -->
                      <div class="input-append">
                        <input class="span3" type="text" name="email" value="" placeholder="you@youremail.com" />
                        <span class="add-on"><i class="icon-envelope"></i></span>
                      </div>
                    </div>
                    </div>
                  
                  <input type="submit" value="SIGN UP" class="span2 offset2 btn btn-warning" />
                  
                </div>
            </form>
        </div>
        <!-- end modal -->

        <!-- Modal lupa password -->
        <div id="lupa" class="span5 modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header" id="mheader">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 id="myModalLabel">Masukkan email atau username</h4>
            </div>
            <form method="POST" action="<?php echo site_url();?>/profil/lupaPassword">
                <div class="modal-body">
                    <div class="span4">
                        <input type="text" value="" name="usernameoremail" placeholder="username atau email" class="span4" />
                    </div>
                    <div class="span2 emailsubmit">
                        <input type="submit" value="RESET PASSWORD" class="btn btn-warning" />
                    </div>
                </div>
            </form>
        </div>
        <!-- end modal lupa password -->
        <?php
function nicetime($date)
{
    if(empty($date)) {
        return "No date provided";
    }
 
    $periods         = array("detik", "menit", "jam", "hari", "minggu", "bulan", "tahun", "dasawarsa");
    $lengths         = array("60","60","24","7","4.35","12","10");
 
    $now             = time();
    $unix_date         = strtotime($date);
 
       // check validity of date
    if(empty($unix_date)) {    
        return "Bad date";
    }
 
    // is it future date or past date
    if($now > $unix_date) {    
        $difference     = $now - $unix_date;
        $tense         = "yang lalu";
 
    } else {
        $difference     = $unix_date - $now;
        $tense         = "lagi dari sekarang";
    }
 
    for($j = 0; $difference >= $lengths[$j] && $j < count($lengths)-1; $j++) {
        $difference /= $lengths[$j];
    }
 
    $difference = round($difference);
 
    // if($difference != 1) {
    //     $periods[$j].= "s";
    // }
 
    return "$difference $periods[$j] {$tense}";
}

function change_number($num=0){
  if($num > 1000){
    return ($num/1000).' ribu';
  } else if($num==0){
    return $num.' ribu';
  } 
  else {
    return $num;
  }
}

//echo change_number("10000");
 
?>